import React, { useState, useEffect } from "react";
import {
  LeftOutline,
  MessageOutline,
  LikeOutline,
  StarOutline,
  UploadOutline,
} from "antd-mobile-icons";
import "./Detail.less";
import api from "../api";
import { useParams, navigate } from "react-router-dom";
import ReactHtmlParser from "react-html-parser";
import { flushSync } from "react-dom";
// 解析返回数据中的html标签
const parseHtmlContent = (htmlContent) => {
  const parseContent = ReactHtmlParser(htmlContent, {
    transform: (node) => {
      if (node.type == "text") {
        const parseText = ReactHtmlParser(node.data);
        return parseText;
      }
    },
  });
  return parseContent;
};

const Detail = function Detail(props) {
  let { navigate } = props;
  let link;
  const [detailData, setDetailData] = useState({});
  const [storyExtra,setStoryExtra]=useState({})
  const { id } = useParams();
  useEffect(() => {
    // 请求列表详情
    let getNewDetail = async () => {
      let res = await api.queryNewsInfo(id);
      setDetailData(res);

      // flushSync(()=>{//flushSync可以保证异步执行完后再执行同步的代码
      //   setDetailData(res);
      // })
      // console.log(11111)
    };
    getNewDetail();
  }, []);
  // 获取新闻点赞信息
  useEffect(()=>{
     let getStoryExtra=async()=>{
         let res=await api.queryStoryExtra(id);
         setStoryExtra(res)
     }
     getStoryExtra()
  },[])
  // 把返回数据中的css样式添加进来
  const handleStyle = () => {
    if (JSON.stringify(detailData) === "{}") {
      return;
    }
    let { css } = detailData;
    // 创建link标签
    link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = css[0];
    document.head.appendChild(link);
  };
  //把返回的顶部大图添加进来
  const handleImage = () => {
    //获取Dom元素
    let imgPlaceHolder = document.querySelector(".img-place-holder");
    if (imgPlaceHolder) {
      let img = document.createElement("img");
      img.src = detailData.image;
      imgPlaceHolder.appendChild(img);
      let parent = imgPlaceHolder.parentNode;
      parent.appendChild(imgPlaceHolder);
    }
  };
  useEffect(() => {
    handleStyle();
    handleImage();
    // 销毁组件：移除创建的样式(要不每次点详情都会创建Link标签)
    return () => {
      if (link) document.head.removeChild(link);
    };
  }, [detailData]);
  return (
    <div className="detail-box">
      {/* 新闻内容 */}
      <div className="news-content">
        <div className="detail-content">
          {parseHtmlContent(detailData.body)}
        </div>
      </div>
      {/* 底部图标 */}
      <div className="tab-bar">
        <div
          onClick={() => {
            navigate(-1);
          }}
        >
          <LeftOutline fontSize={24} color="#000"></LeftOutline>
        </div>
        <div className="comments">
          <MessageOutline fontSize={24} color="#000"/>
          <span>{storyExtra?storyExtra.comments:0}</span>
        </div>
        <div className="popularity">
          <LikeOutline fontSize={24} color="#000"/>
          <span>{storyExtra?storyExtra.popularity:0}</span>
        </div>
        <div>
          <StarOutline fontSize={24} color="#000"></StarOutline>
        </div>
        <div>
          <UploadOutline fontSize={24} color="#000"></UploadOutline>
        </div>
      </div>
    </div>
  );
};
export default Detail;
